import defaltImg from '@/assets/images/200.png'
import { useIntersectionObserver } from '@vueuse/core'
export default {
  install (app) {
    app.directive('imgLazy', {
      mounted (el, binding) {
        el.src = defaltImg
        console.log(el, binding.value)

        const { stop } = useIntersectionObserver(
          el, // target 是观察的目标容器，而且是vue3.0方式绑定的dom对象
          // isIntersecting 是否进入可视区域，true是进入 false是移出
          // observerElement 被观察的dom
          ([{ isIntersecting }], observerElement) => {
            // 在此处可根据isIntersecting来判断，然后做业务
            console.log('是否可见', isIntersecting, stop)
            if (isIntersecting) {
              el.onerror = () => {
                el.src = defaltImg
              }
              stop()
              el.src = binding.value
            }
          },
          {
            threshold: 0.1
          })
      }
    })
  }
}
